iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 17
0
Software Development

Swift 新手上路之30天復刻版型系列 第 17

Day 17 - Agoda Side Menu (2) - SWRealViewController

  • 分享至 

  • xImage
  •  

今天決定用 3 party library: SWRevealViewController 來實做 side menu。

一、前置動作

首先先下載SWRevealViewController 找到 SWRevealViewController 資料夾將 SWRevealViewController.h 以及 SWRevealViewController.m 放到 xcode 中。拉進這兩個檔案後,xcode 會詢問是不是要建立 Objective-C 的 bridging header,在這裡選擇 create。
https://ithelp.ithome.com.tw/upload/images/20180105/20107699Eq8c8WoS9w.png

接著會產生一個 Bridging-Header.h 檔案,在裡面編輯 #import "SWRevealViewController.h"
https://ithelp.ithome.com.tw/upload/images/20180105/20107699buzgK5ob8O.png

二、內容配置

在 storyboard 中我們需要前後兩個 view controller 分別做為主畫面以及 side menu 的畫面,因此在這裡先保留了 project 預先產生的 view controller,另外拉進兩個 view controller,且在主畫面上 embed in 一個 navigation bar ; 而在side menu 部分的 view controller 則放進一個 image view 以及一個 table view。

在保留的這個 view controller 上將 class 指定為 SWRevealViewController,接著按住 control 連線到 side menu 以及主畫面的控制器,選擇"reveal view controller set controller",這樣會得到兩個 Segue,在 Segue 上分別設定 identifier 為 sw_front (主畫面)以及 sw_rear (menu部分)來告訴 SWRevealViewController 哪個代表前置控制器又哪個代表後置控制器。
https://ithelp.ithome.com.tw/upload/images/20180105/20107699d0J0V8DsP2.png

圖示:
https://ithelp.ithome.com.tw/upload/images/20180105/20107699fZphUUgpLY.png

三、

在 storyboard 中拉進一個 Bar Button Item 到主畫面的 Navigation Bar 上並將按鈕換成圖片,再打開 Asistant editor 將按鈕以 @IBOutlet 連結,並且在 viewDidLoad 程式碼部份編輯。

    @IBOutlet weak var menuButton: UIBarButtonItem!
    override func viewDidLoad() {
        super.viewDidLoad()

       menuButton.target = self.revealViewController()
       menuButton.action = #selector(SWRevealViewController.revealToggle(_:))
    }

此時就能透過按鈕來叫出 side menu 了,但因為只有按鈕能夠使用,因此在這裡我們加上一個手勢。

self.view.addGestureRecognizer(self.revealViewController().panGestureRecognizer())

這樣就可以透過按鈕以及手勢來叫出 side menu 了。
https://ithelp.ithome.com.tw/upload/images/20180105/20107699xFoXWjP7Ry.png
https://ithelp.ithome.com.tw/upload/images/20180105/201076994ViL73e8he.png


上一篇
Day 16 - Agoda Side Menu (1)
下一篇
Day 18 - Navigation Bar 設置全透明
系列文
Swift 新手上路之30天復刻版型30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言